<template>
  <div class="ltvAnalysis">
    <!-- 顶部区域 具有 抽样参数 近似计算参数 -->
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>留存分析</span>
        <span class="tool_main">
          <!--                  <span class="save" @click="dialog_save=true">-->
          <!--                    <i class="el-icon-folder-add"></i>-->
          <!--                    保存-->
          <!--                  </span>-->
          <!--                  <i class="fgf"></i>-->
          <el-tooltip
            class="tool_son"
            effect="light"
            content="刷新"
            placement="bottom"
          >
            <i class="el-icon-refresh"></i>
          </el-tooltip>
          <el-tooltip
            class="tool_son"
            effect="light"
            content="下载数据"
            placement="bottom"
          >
            <i class="el-icon-download" @click="exportExcel"></i>
          </el-tooltip>
          <ml-preser-vation @getSearchParams="assembleParam"></ml-preser-vation>
        </span>
      </header>
    </div>

    <!-- 筛选项区 start -->
    <div class="filterBox">
      <div class="viewFunnelBox">
        <!-- 初始事件 start -->
        <div class="step-wrap">
          <!--        序号+1-->
          <div class="lineHeader">显示满足如下行为模式的用户留存情况：</div>
          <div
            style="
              position: absolute;
              right: 20px;
              display: flex;
              align-items: center;
            "
          >
            设置关联属性
            <el-switch
              style="margin-left: 10px"
              v-model="isRelationSwitch"
              active-color="#13ce66"
              inactive-color="#e6e6e6"
            >
            </el-switch>
          </div>
        </div>
      </div>

      <div class="viewFunnelBox">
        <!-- 初始事件 start -->
        <div class="step-wrap">
          <!--        序号+1-->
          <div class="lineHeader">初始行为</div>
          <!--        选择框-->
          <div style="position: relative; height: 32px">
            <!--        选择框-->
            <el-button
              icon="el-icon-full-screen"
              size="small"
              @click="choEvent(0)"
            >
              {{ currentEventGroup[0].cname || "请选择" }}
            </el-button>
            <!--          内置选择框-->
            <options
              v-if="showEventGroup[0].show"
              :initEventGroupDetail="initEventGroupDetail"
              v-clickoutside="handleClickOutSide"
              :initEventGroup="initEventGroup"
              :currentEvent="currentEventGroup[0]"
              :origin="0"
              @choInitEventEnd="choEventEnd"
            ></options>
          </div>
          <el-button
            type="text"
            icon="el-icon-plus"
            size="small"
            @click="editCond(0)"
            style="margin-left: 10px"
            >筛选
          </el-button>
        </div>
        <CustomScreen
          :ref="`customScreenRef0`"
          :isSupName="true"
          :sup-name="currentEventGroup[0].eventId"
        ></CustomScreen>

        <template v-if="isRelationSwitch">
          <div class="step-wrap">
            <!--        序号+1-->
            <div class="lineHeader">关联属性</div>
            <!--        选择框-->
            <div style="position: relative">
              <el-select
                v-model="curRelation[0]"
                placeholder="请选择"
                size="mini"
                value-key="name"
              >
                <el-option
                  v-for="item in curRelationList[0]"
                  :key="item.name"
                  :label="item.cname"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </template>

        <!-- 后续行为  -->
        <div class="step-wrap">
          <!--        序号+1-->
          <div class="lineHeader">后续行为</div>
          <!--        选择框-->
          <div style="position: relative; height: 32px">
            <!--        选择框-->
            <el-button
              icon="el-icon-full-screen"
              size="small"
              @click="choEvent(1)"
            >
              {{ currentEventGroup[1].cname || "请选择" }}
            </el-button>
            <!--          内置选择框-->
            <options
              v-if="showEventGroup[1].show"
              :initEventGroupDetail="initEventGroupDetail"
              v-clickoutside="handleClickOutSide"
              :initEventGroup="initEventGroup"
              :currentEvent="currentEventGroup[1]"
              :origin="1"
              @choInitEventEnd="choEventEnd"
            ></options>
          </div>
          <el-button
            type="text"
            icon="el-icon-plus"
            size="small"
            @click="editCond(1)"
            style="margin-left: 10px"
            >筛选
          </el-button>
        </div>
        <CustomScreen
          :ref="`customScreenRef1`"
          :isSupName="true"
          :sup-name="currentEventGroup[1].eventId"
        ></CustomScreen>

        <template v-if="isRelationSwitch">
          <div class="step-wrap">
            <!--        序号+1-->
            <div class="lineHeader">关联属性</div>
            <!--        选择框-->
            <div style="position: relative">
              <el-select
                v-model="curRelation[1]"
                placeholder="请选择"
                size="mini"
                value-key="name"
              >
                <el-option
                  v-for="item in curRelationList[1]"
                  :key="item.name"
                  :label="item.cname"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </template>
      </div>
      <!-- 筛选项区 end -->
      <template v-if="sameTimeShow === true && isRelationSwitch === false">
        <div class="viewFunnelBox">
          <div class="step-wrap">
            <div class="lineHeader">
              同时显示
              <el-button
                :style="{
                  color: isSameTime === true ? '#bfbfbf' : '',
                  marginLeft: '15px',
                }"
                type="text"
                icon="el-icon-plus"
                size="midden"
                @click="isSameTime = !isSameTime"
                :disabled="isSameTime === true"
                >添加指标
              </el-button>
            </div>
          </div>
          <!-- 初始事件 start -->
          <div class="step-wrap" v-if="isSameTime" id="isSameContext">
            <!--        序号+1-->
            <!--        选择框-->
            <div style="position: relative; height: 32px; margin-left: 10px">
              <!--        选择框-->
              <el-button
                icon="el-icon-full-screen"
                size="small"
                @click="choEvent(2)"
                >{{ currentEventGroup[2].cname || "请选择" }}
              </el-button>
              <!--          内置选择框-->
              <options
                v-if="showEventGroup[2].show"
                :initEventGroupDetail="initEventGroupDetail"
                v-clickoutside="handleClickOutSide"
                :initEventGroup="initEventGroup"
                :currentEvent="currentEventGroup[2]"
                :origin="2"
                @choInitEventEnd="choEventEnd"
              ></options>
            </div>

            <div style="margin-left: 10px; font-size: small">的</div>

            <el-cascader
              style="margin-left: 10px"
              size="small"
              v-model="currentSameOptions"
              :options="sameOptions"
            ></el-cascader>

            <el-button
              style="margin-left: 10px"
              type="text"
              icon="el-icon-close"
              size="midden"
              @click="closeSameTime"
            >
            </el-button>
          </div>
        </div>
      </template>

      <div class="viewFunnelBox">
        <div class="step-wrap">
          <div class="lineHeader">
            <div>按</div>
            <template v-for="(item, index) in byXXXReadValues">
              <div :key="index">
                <ScreenButton
                  icon="el-icon-full-screen"
                  size="small"
                  :orgin="index"
                  :showDelete="byXXXReadValues.length > 1"
                  @click="deleteScreentButton"
                >
                  {{ byXXXReadValues[index].cname || "请选择" }}
                </ScreenButton>
                <CategoryFiltering
                  v-if="showbyXXXReadtabsBodyParams[index].isShow === true"
                  v-clickoutside="handleClickOutSide"
                  @choAttributeEnd="choAttributeEnd"
                  :origin="{ key: 'byXXXRead', index: index }"
                  :haveTotal="'true'"
                  :tabsHeadParams="byXXXReadtabsHeadParams"
                  :tabsBodyParams="byXXXReadtabsBodyParams"
                ></CategoryFiltering>
              </div>
            </template>
            <el-button
              :style="{
                color: isSameTime === true ? '#bfbfbf' : '',
                marginLeft: '10px',
              }"
              type="text"
              icon="el-icon-plus"
              size="midden"
              :disabled="isRelationSwitch || notTotal === false"
              @click="
                byXXXReadValues.push({ cname: '总体' });
                showbyXXXReadtabsBodyParams.push({ isShow: false });
              "
            >
            </el-button>
            <div style="font-size: small; margin-left: 10px">查看</div>
          </div>
        </div>
      </div>

      <div class="viewFunnelBoxLast">
        <CustomScreen
          :ref="`customScreenRef2`"
          :isSupName="false"
          :isEvent="false"
        ></CustomScreen>
        <div class="step-wrap">
          <div class="lineHeader">
            且用户符合
            <el-button
              type="text"
              icon="el-icon-plus"
              size="small"
              @click="editCond(2)"
              style="margin-left: 10px"
              >筛选
            </el-button>

            <el-button
              type="primary"
              :icon="icon"
              :disabled="isDoCompute !== 0"
              size="small"
              class="toDoButton"
              @click="searchRetained()"
              >分析计算
              <template v-if="icon === 'el-icon-loading'"
                >({{ backTime }}s)</template
              >
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区 start -->
    <div class="contentBox">
      <div class="childFilterBox">
        <!-- 窗口期 -->
        <timeRestrict
                :oldTime="dateS"
                :timeRestrict="timeRestrict"
                @change="dateSChange"
        ></timeRestrict>

        <el-select
          size="mini"
          :style="{ width: '90px', marginLeft: '10px' }"
          v-model="currentTableTimeType"
        >
          <el-option
            v-for="(cItem, index) in tableTimeType"
            :value="cItem.value"
            :key="index"
            :label="cItem.label"
          ></el-option>
        </el-select>

        <el-select
          size="mini"
          :style="{ width: '90px', marginLeft: '10px' }"
          v-model="currentTableTimeLimitType"
        >
          <el-option
            v-for="(cItem, index) in tableTimeLimitType[currentTableTimeType]"
            :value="cItem.value"
            :key="index"
            :label="cItem.label"
          ></el-option>
        </el-select>

        <InputNumber
          v-if="currentTableTimeLimitType === -1"
          :style="{ marginLeft: '10px' }"
          v-model="num"
          controls-position="right"
          :min="1"
          :max="60"
          :slotNumber="tableTimeType[currentTableTimeType].label.charAt(1)"
          size="mini"
        >
        </InputNumber>

        <el-select
          size="mini"
          :style="{ width: '90px', marginLeft: '10px' }"
          v-model="currentStroageType"
        >
          <el-option
            v-for="(cItem, index) in ['留存', '流失']"
            :value="cItem"
            :key="index"
            :label="cItem"
          ></el-option>
        </el-select>
      </div>

      <div class="childFilterBox">
        <TableFunnel
          :userDialogData="userDialogData"
          :timeType="timeType"
          :retainedReportResData="initChartViewData"
          :byXXXReadtabsBodyParams="byXXXReadtabsBodyParams"
          ref="exportExcel"
        ></TableFunnel>
        <el-divider></el-divider>
      </div>
    </div>

    <div class="contentBox">
      <!-- 切换视图 趋势 | 对比 -->
      <el-radio-group v-model="state" size="mini" @change="stateChange()">
        <el-radio-button :label="'trends'">趋势</el-radio-button>
        <el-radio-button :label="'overview'">对比</el-radio-button>
      </el-radio-group>

      <el-radio-group
        v-model="isPercentage"
        size="mini"
        @change="stateChange()"
        style="float: right"
      >
        <el-radio-button :label="false">123</el-radio-button>
        <el-radio-button :label="true">%</el-radio-button>
      </el-radio-group>

      <div class="contrastFunnelBox"></div>
      <el-container>
        <div id="chart" style="width: 100%; height: 60vh"></div>
      </el-container>
    </div>
  </div>
</template>

<script>
/*  下拉框 */
import options from "./options";

/*  营收步骤下拉框 */
// import revenueOptions from "./revenueOptions";

/*  数据资料 */
import DataTypeConfig from "./dataType.config.js";

/*  表格展示组件 */
import TableFunnel from "./tableFunnel";

/*  营收事件一级筛选项 */
import CustomScreen from "./customScreen";

/*  用户进行xxx的 次数选框 */
import TimesBox from "./timesBox";

/*  类别筛选 */
import CategoryFiltering from "./categoryFiltering";

/*  选择自定义日期后的 xx日 xx月等 */
import InputNumber from "./input-number";

/*  按xxx查看 */
import ScreenButton from "./screenButton";

/*  接口 */
import {
  propertyList,
  thinglGroup,
  thinglList,
  retainedFunnel,
} from "./api.config";

/*留存分析保存*/
import preserVation from "./preserVation";

//当鼠标点击了指令所绑定元素的外部时，就会触发绑定方法所需要的控件
import clickoutside from "element-ui/src/utils/clickoutside";
import TimeSelect from "./timeSelect";

export default {
  name: "retainedAnalysis",
  components: {
    options,
    TableFunnel,
    CustomScreen,
    TimesBox,
    InputNumber,
    CategoryFiltering,
    ScreenButton,
    "ml-time-select": TimeSelect,
    "ml-preser-vation": preserVation,
  },
  directives: { clickoutside },
  data() {
    return {
      /* 点击分析计算切换图表 */
      icon: "el-icon-search",
      /* 分析计算倒计时*/
      backTime: 60,
      /* 是否正在计算中*/
      isDoCompute: 0,

      notTotal: false,
      //设置关联属性
      isRelationSwitch: false,
      //当前选择的关联属性数组
      curRelation: [{}, {}],
      //当前可选择的关联属性数组
      curRelationList: [{}, {}],
      //选择留存还是流失
      currentStroageType: "留存",
      //是否展示当前同时展示
      sameTimeShow: true,
      //当前选择同时显示xxx
      currentSameEventGroup: {},
      //当前选择同时显示xxx的xxx
      currentSameOptions: {},
      //同时显示xxx的xxx 数组
      sameOptions: [],
      //当前按XXX查看的数值
      byXXXReadValues: [{ cname: "总体" }],
      //是否展示按XXX查看选择器
      showbyXXXReadtabsBodyParams: [{ isShow: false }],
      //按XXX查看选择器的属性组
      byXXXReadtabsHeadParams: [
        "初始行为事件属性",
        "后续行为事件属性",
        "用户属性",
        "用户分群",
        "用户标签",
      ],
      //按XXX查看选择器的属性值
      byXXXReadtabsBodyParams: [],
      //是否是按百分比显示图表
      isPercentage: false,
      /* 趋势图表 */
      chartView: {},
      /* 视图类型 */
      state: "trends", // trends 趋势 | overview 对比
      /* 点击事件是否显示 */
      showEventGroup: [{ show: false }, { show: false }, { show: false }],
      /* 同时显示 */
      isSameTime: false,
      /* 初始事件数组 */
      initEventGroup: {},
      /* 三个行为 初始行为 后续行为 以及同时显示*/
      currentEventGroup: [{}, {}, {}],
      /* 初始事件详情数组 */
      initEventGroupDetail: DataTypeConfig.initEventGroupDetail,
      /* 对比时选用的LTV类别 */
      overviewStep: DataTypeConfig.overviewStep,
      /* 用来渲染图表和列表的数据 */
      initChartViewData: {},
      /* 窗口期 */
      winPeriod: ["", ""],
      /* 当前可选择时间类型 */
      tableTimeType: DataTypeConfig.tableTimeType,
      /* 当前选择时间类型 */
      currentTableTimeType: 0,
      /* 当前可选择时间类型区间 */
      tableTimeLimitType: DataTypeConfig.tableTimeLimitType,
      num: 1,
      /* 当前选择时间类型区间数值 */
      currentTableTimeLimitType: 0,
      /* 时间类型 */
      timeType: "天",
      /* 日期选择器，不能选择今天以后的日期 */
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      /* 用户列表需要的数据 */
      userDialogData: {
        firstEvent: {},
        secondEvent: {},
        unit: "",
        duration: "",
        fromDate: "",
        toDate: "",
        byFields: [],
        byEvents: [],
        userFilter: [],
        //目前认为固定参数
        subTaskType: "RETENTION",
        userUnit: "人",
        showZeroDay: "checked",
        isSaved: false,
        extendOverEndDate: true,
        lastZero: true,
        useCache: true,
        samplingFactor: 64,
        filter: {},
        timeZoneMode: "",
        serverTimeZone: "",
        durationTrueName: "6",
        //需要在表格里面传入 是否含有child子项
        rollup_date: "",
        isWastage: false,
        sliceInterval: "",
        sliceByValues: "",
        sliceDate: "",
      },
      dateS: [], // 开始时间段
      timeRestrict: {
        function: "absolute_time",
        params:[this.getBeforeDate(2), this.getBeforeDate(0)]
      }, // 动态时间参数
      startDate: this.getBeforeDate(2),
      endDate: this.getBeforeDate(0),
    };
  },
  watch: {
    isRelationSwitch: function () {
      if (this.isRelationSwitch) {
        let length = this.byXXXReadValues.length;
        for (let i = 1; i < length; i++) {
          this.byXXXReadValues.pop();
        }
      }
    },
    currentTableTimeType: function (val, oldval) {
      this.currentTableTimeLimitType = 0;
      let timeType = this.currentTableTimeType;
      for (let j = 0; j < this.tableTimeType.length; j++) {
        if (this.tableTimeType[j].value === timeType) {
          timeType = this.tableTimeType[j].label.substring(1);
          break;
        }
      }
      this.timeType = timeType;
    },
    currentSameEventGroup: function () {
      this.getEventsData();
    },
    byXXXReadValues: {
      handler: function (val, oldVal) {
        this.initSameTimeShow();
      },
      deep: true,
    },
  },
  methods: {
    getBeforeDate(number) {
      let num = number;
      let date = new Date();

      let year = date.getFullYear();
      let mon = date.getMonth() + 1;
      let day = date.getDate();

      if (typeof num === "number") {
        if (day <= num) {
          if (mon > 1) {
            mon = mon - 1;
          } else {
            year = year - 1;
            mon = 12;
          }
        }

        date.setDate(date.getDate() - num);

        year = date.getFullYear();
        mon = date.getMonth() + 1;
        day = date.getDate();
      }

      return (
              year +
              "-" +
              (mon < 10 ? "0" + mon : mon) +
              "-" +
              (day < 10 ? "0" + day : day)
      );
    },
    //  追加对比 时间函数
    timeContrast(v) {
      let arr = [0, 0];
      // 同段时间
      if (v == "1") {
        let c = new Date(this.dateS[1]) - new Date(this.dateS[0]);
        arr[1] = new Date(this.dateS[0]) - 24 * 60 * 60 * 1000;
        arr[0] = arr[1] - c;
      }
      // 自定义时间
      if (v == "2") {
        arr[0] = new Date(this.dateS[0]) - 24 * 60 * 60 * 1000;
        arr[1] = new Date(this.dateS[1]) - 24 * 60 * 60 * 1000;
      }
      this.dateD = arr;
    },
    dateSChange(newValue) {
      let { sendTimeArr, timeRestrict } = newValue;
      this.timeRestrict = timeRestrict
      this.dateS = [sendTimeArr[0], sendTimeArr[1]];
      this.startDate = sendTimeArr[0];
      this.endDate = sendTimeArr[1];
      let contrastStartDate = null;
      let contrastEndDate = null;
      if (this.dateD && this.dateD[0]) {
        let date = new Date(this.dateD[0]);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        contrastStartDate = year + "-" + mon + "-" + day;
      }
      if (this.dateD && this.dateD[1]) {
        let date = new Date(this.dateD[1]);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        contrastEndDate = year + "-" + mon + "-" + day;
      }

      // this.$emit("conversion", {
      //   unit: this.unit,
      //   startDate,
      //   endDate,
      //   contrastStartDate,
      //   contrastEndDate,
      //   timeRestrict    // 动态时间配置集合
      // });
    },
    exportExcel() {
      this.$refs.exportExcel.exportExcel();
    },
    timeUnity(time) {
      this.winPeriod = time;
    },
    //点击外部时 关闭所有选择框
    handleClickOutSide(e) {
      this.showEventGroup.map((item) => {
        item.show = false;
      });
      this.showbyXXXReadtabsBodyParams.map((item) => {
        item.isShow = false;
      });
      this.$forceUpdate();
    },
    /* 图表大小自适应 */
    autoChart() {
      // 重新渲染图表
      this.chartView.resize();
    },
    initSameTimeShow() {
      let _sameTimeShow = true;
      for (let i = 0; i < this.byXXXReadValues.length; i++) {
        if (this.byXXXReadValues[i].cname !== "总体") {
          _sameTimeShow = false;
        }
      }
      this.sameTimeShow = _sameTimeShow;

      let notTotal = true;
      for (let i = 0; i < this.byXXXReadValues.length; i++) {
        if (this.byXXXReadValues[i].cname === "总体") {
          notTotal = false;
        }
      }
      this.notTotal = notTotal;

      this.$forceUpdate();
    },
    //按xxx查看的删除按钮
    deleteScreentButton(event, mes) {
      if (mes.isDelete === false || mes.isDelete === undefined) {
        this.showbyXXXReadtabsBodyParams[mes.orgin].isShow =
          !this.showbyXXXReadtabsBodyParams[mes.orgin].isShow;
      } else {
        this.byXXXReadValues.splice(mes.orgin, 1);
      }
      this.$forceUpdate();
    },
    /* 点击趋势 */
    retainedAnlaysisToEChartAndTableTrend() {
      // 基于准备好的dom，初始化echarts实例
      if (this.initChartViewData.rows === undefined) {
        return;
      }
      this.chartView = this.$echarts.init(document.getElementById("chart"));
      let t = this;

      let chartHeadValues = [];

      for (let i = 0; i < this.initChartViewData.rows[0].cells.length; i++) {
        chartHeadValues.push({
          name: "第" + i + this.timeType,
          icon: "rect",
        });
      }

      let option = {
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: "vertical",
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: "right",
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: "center",
          data: chartHeadValues,
        },
        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: "16%", // 等价于 y: '16%'
          left: "3%",
          right: "8%",
          bottom: "16%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: true,
          data: [],
        },

        yAxis: {
          name: "数值",
          type: "value",
          splitNumber: 9, // 设置y轴刻度间隔个数
        },
        series: [],
      };

      if (this.initChartViewData.byFields.length === 0) {
        this.initChartTrendsTotal(option);
      } else {
        this.initChartTrendsByValues(option);
      }

      // 使用刚指定的配置项和数据显示图表。
      this.chartView.clear();
      this.chartView.setOption(option);

      this.$forceUpdate();
    },
    /* 点击对比*/
    retainedAnlaysisToEChartAndTableOverview() {
      // 基于准备好的dom，初始化echarts实例
      if (this.initChartViewData.rows === undefined) {
        return;
      }
      this.chartView = this.$echarts.init(document.getElementById("chart"));
      let t = this;

      let chartHeadValues = [];

      if (this.initChartViewData.byFields.length === 0) {
        this.initOverviewHeadTotal(chartHeadValues);
      } else {
        this.initOverviewHeadByValues(chartHeadValues);
      }
      let option = {
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: "vertical",
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: "right",
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: "center",
          data: chartHeadValues,
        },
        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: "16%", // 等价于 y: '16%'
          left: "3%",
          right: "8%",
          bottom: "16%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: true,
          data: [],
        },

        yAxis: {
          name: "数值",
          type: "value",
          splitNumber: 9, // 设置y轴刻度间隔个数
        },
        series: [],
      };
      if (this.initChartViewData.byFields.length === 0) {
        this.initChartOverviewTotal(option);
      } else {
        this.initChartOverviewByValues(option);
      }

      // 使用刚指定的配置项和数据显示图表。
      this.chartView.clear();
      this.chartView.setOption(option);

      this.$forceUpdate();
    },
    initOverviewHeadTotal(chartHeadValues) {
      for (let i = 1; i < this.initChartViewData.rows.length; i++) {
        chartHeadValues.push({
          name: this.initChartViewData.rows[i].byValue,
          icon: "rect",
        });
      }
    },
    initOverviewHeadByValues(chartHeadValues) {
      for (let i = 0; i < this.initChartViewData.rows.length; i++) {
        let str = "";
        for (
          let j = 0;
          j < this.initChartViewData.rows[i].byValues.length;
          j++
        ) {
          str += this.initChartViewData.rows[i].byValues[j];
        }
        chartHeadValues.push({
          name: str,
          icon: "rect",
        });
      }
    },
    initChartOverviewTotal(option) {
      //设置x轴下标
      for (let i = 1; i < this.initChartViewData.rows.length; i++) {
        option.xAxis.data.push(this.initChartViewData.rows[i].byValue);
      }

      for (let i = 0; i < option.legend.data.length; i++) {
        //一行的模板
        let seriesItem = {
          name: option.legend.data[i].name,
          data: [],
          type: "line",
          // 设置折线上圆点大小
          symbolSize: 6,
          symbol: "circle",
        };
        for (
          let j = 0;
          j < this.initChartViewData.rows[i + 1].cells.length;
          j++
        ) {
          let rowColumnItem = this.initChartViewData.rows[i + 1].cells[j];
          if (
            rowColumnItem === undefined ||
            rowColumnItem.people === undefined
          ) {
            seriesItem.data.push(0);
            continue;
          }
          if (this.isPercentage === false) {
            seriesItem.data.push(rowColumnItem.people);
          } else {
            seriesItem.data.push(rowColumnItem.percent);
          }
        }
        option.series.push(seriesItem);
      }
    },
    initChartOverviewByValues(option) {
      //设置x轴下标
      for (let i = 0; i < this.initChartViewData.rows[0].cells.length; i++) {
        option.xAxis.data.push("第" + i + this.timeType);
      }

      for (let i = 0; i < option.legend.data.length; i++) {
        //一行的模板
        let seriesItem = {
          name: option.legend.data[i].name,
          data: [],
          type: "line",
          // 设置折线上圆点大小
          symbolSize: 6,
          symbol: "circle",
        };
        for (let j = 0; j < this.initChartViewData.rows[i].cells.length; j++) {
          let rowColumnItem = this.initChartViewData.rows[i].cells[j];
          if (
            rowColumnItem === undefined ||
            rowColumnItem.people === undefined
          ) {
            seriesItem.data.push(0);
            continue;
          }
          if (this.isPercentage === false) {
            seriesItem.data.push(rowColumnItem.people);
          } else {
            seriesItem.data.push(rowColumnItem.percent);
          }
        }
        option.series.push(seriesItem);
      }
    },
    searchRetained() {
      let param = this.assembleParam();
      let params = {
        req: param,
        operationCtx: {},
      };
      let t = this;

      t.isDoCompute = 1;
      /* 替换按钮图标 表示加载中 */
      t.icon = "el-icon-loading";
      /* 开启记时 */
      t.backTimeNumber();
      retainedFunnel(params)
        .then((res) => {
          t.icon = "el-icon-search";
          // 返回状态码如果不是成功说明异常 弹出提示
          if (res.data.success !== true) {
            t.$message.error(res.data.errorMessage);
            return;
          }
          t.initChartViewData = res.data.value;
          t.stateChange();
        })
        .catch((error) => {
          t.icon = "el-icon-search";
          console.log("error = ", error);
        });
    },
    /* 分析计算到倒计时*/
    backTimeNumber() {
      if (this.icon !== "el-icon-search") {
        if (this.backTime >= 0) {
          this.backTime--;
          setTimeout(this.backTimeNumber, 1000);
        } else {
          t.$message.error("计算超时");
        }
      } else {
        this.isDoCompute = 0;
        this.backTime = 60;
        return;
      }
    },
    assembleParam(callback) {
      let firstEvent = {};
      firstEvent["eventId"] = this.currentEventGroup[0].eventId;
      firstEvent["filter"] =
        this.$refs["customScreenRef0"].getFilterConditions();
      firstEvent["relevanceField"] = this.isRelationSwitch
        ? "event." +
          this.currentEventGroup[0].eventId +
          "." +
          this.curRelation[0].name
        : "";

      let secondEvent = {};
      secondEvent["eventId"] = this.currentEventGroup[1].eventId;
      secondEvent["filter"] =
        this.$refs["customScreenRef1"].getFilterConditions();
      secondEvent["relevanceField"] = this.isRelationSwitch
        ? "event." +
          this.currentEventGroup[1].eventId +
          "." +
          this.curRelation[1].name
        : "";

      /*同时显示*/

      let measures = [];
      let measure = {};
      let eventId = this.currentEventGroup[2].eventId;
      let field = "";
      let aggregator = this.currentSameOptions;
      if (
        this.currentSameOptions.length === 2 &&
        this.isRelationSwitch === false
      ) {
        field = this.currentSameOptions[0];
        aggregator = this.currentSameOptions[1];
        measure["field"] = field;
      } else {
        aggregator = this.currentSameOptions[0];
      }

      measure["eventId"] = eventId;
      measure["aggregator"] = aggregator;
      this.isSameTime ? measures.push(measure) : [];

      /*按xxx查看*/
      let byFields = [];
      let byEvents = [];
      for (let i = 0; i < this.byXXXReadValues.length; i++) {
        if (
          this.byXXXReadValues[i].name !== "" &&
          this.byXXXReadValues[i].name !== undefined &&
          this.byXXXReadValues[i].cname !== "总体"
        ) {
          if (this.byXXXReadValues[i].parentName === "user") {
            byFields.push(
              this.byXXXReadValues[i].parentName +
                "." +
                this.byXXXReadValues[i].name
            );
          } else {
            byFields.push(
              "event." +
                this.byXXXReadValues[i].parentName +
                "." +
                this.byXXXReadValues[i].name
            );
          }
          switch (this.byXXXReadValues[i].parentIndex) {
            case 0:
              byEvents.push("first");
              break;
            case 1:
              byEvents.push("second");
              break;
            case 2:
              byEvents.push("user");
              break;
          }
        }
      }

      /*开始日期与结束日期*/
      let fromDate = this.startDate;
      let toDate = this.endDate;

      let unit = "day";
      if (this.currentTableTimeType === 0) {
        unit = "day";
      } else if (this.currentTableTimeType === 1) {
        unit = "week";
      } else if (this.currentTableTimeType === 2) {
        unit = "month";
      }

      let duration = this.currentTableTimeLimitType;

      switch (duration) {
        case 0: {
          switch (unit) {
            case "day":
              duration = 7;
              break;
            case "week":
              duration = 3;
              break;
            case "month":
              duration = 3;
              break;
          }
          break;
        }
        case -1:
          duration = this.num;
      }

      let userFilter = this.$refs["customScreenRef2"].getFilterConditions();

      let isWastage = this.currentStroageType === "流失";

      let param = {};
      param["firstEvent"] = firstEvent;
      param["secondEvent"] = secondEvent;
      param["measures"] = measures;
      param["byFields"] = byFields;
      param["byEvents"] = byEvents;
      param["fromDate"] = fromDate;
      param["toDate"] = toDate;
      param["unit"] = unit;
      param["duration"] = duration;
      param["isWastage"] = isWastage;
      param["filter"] = userFilter;
      param["timeRestrict"] = this.timeRestrict;

      this.userDialogData.firstEvent = firstEvent;
      this.userDialogData.secondEvent = secondEvent;
      this.userDialogData.unit = unit;
      this.userDialogData.duration = duration;
      this.userDialogData.fromDate = fromDate;
      this.userDialogData.toDate = toDate;
      this.userDialogData.byFields = byFields;
      this.userDialogData.byEvents = byEvents;
      this.userDialogData.userFilter = userFilter;

      callback ? callback(param) : null;

      return param;
    },
    initChartTrendsTotal(option) {
      //设置x轴下标
      for (let i = 1; i < this.initChartViewData.rows.length; i++) {
        option.xAxis.data.push(this.initChartViewData.rows[i].byValue);
      }

      for (let i = 0; i < option.legend.data.length; i++) {
        //一行的模板
        let seriesItem = {
          name: option.legend.data[i].name,
          data: [],
          type: "line",
          // 设置折线上圆点大小
          symbolSize: 6,
          symbol: "circle",
        };
        for (let j = 1; j < this.initChartViewData.rows.length; j++) {
          let rowColumnItem = this.initChartViewData.rows[j].cells[i];
          if (
            rowColumnItem === undefined ||
            rowColumnItem.people === undefined
          ) {
            seriesItem.data.push("");
            continue;
          }
          if (this.isPercentage === false) {
            seriesItem.data.push(rowColumnItem.people);
          } else {
            seriesItem.data.push(rowColumnItem.percent);
          }
        }
        option.series.push(seriesItem);
      }
    },
    //图表趋势并且选择数值不为总体
    initChartTrendsByValues(option) {
      //设置x轴下标
      for (let i = 0; i < this.initChartViewData.rows.length; i++) {
        if (
          this.initChartViewData.rows[i].byValue === undefined ||
          this.initChartViewData.rows[i].byValue === null
        ) {
          let byValue = "";
          for (
            let j = 0;
            j < this.initChartViewData.rows[i].byValues.length;
            j++
          ) {
            byValue += this.initChartViewData.rows[i].byValues[j];
          }
          option.xAxis.data.push(byValue);
        } else {
          option.xAxis.data.push(this.initChartViewData.rows[i].byValue);
        }
      }

      for (let i = 0; i < option.legend.data.length; i++) {
        //一行的模板
        let seriesItem = {
          name: option.legend.data[i].name,
          data: [],
          type: "line",
          // 设置折线上圆点大小
          symbolSize: 6,
          symbol: "circle",
        };
        for (let j = 0; j < this.initChartViewData.rows.length; j++) {
          let rowColumnItem = this.initChartViewData.rows[j].cells[i];
          if (
            rowColumnItem === undefined ||
            rowColumnItem.people === undefined
          ) {
            seriesItem.data.push(0);
            continue;
          }
          if (this.isPercentage === false) {
            seriesItem.data.push(rowColumnItem.people);
          } else {
            seriesItem.data.push(rowColumnItem.percent);
          }
        }
        option.series.push(seriesItem);
      }
    },
    initYestedayShowTime() {
      let timenow = new Date();
      timenow.setDate(timenow.getDate() - 1); //设置天数 -1 天，昨天的日期
      let y = timenow.getFullYear(); //年
      let m = timenow.getMonth() + 1; //月
      m = m < 10 ? "0" + m : m;
      let d = timenow.getDate(); //日
      d = d < 10 ? "0" + d : d;
      let yesterdayTime = y + "-" + m + "-" + d; //字符串拼接成自己想要的时间格式，现在是yyyy/mm/dd格式
      this.winPeriod = [yesterdayTime, yesterdayTime];
    },
    //获取按XXX查看选择器的属性值 事件属性以及用户属性 以下四个方法
    doByXXXReadtabsBodyParams(resolve) {
      let t = this;
      t.byXXXReadtabsBodyParams = [];
      this.doByXXXReadtabsBodyParamsEventInit(t, resolve);
    },
    doByXXXReadtabsBodyParamsEventInit(t, resolve) {
      let params = {
        req: {
          events: [this.currentEventGroup[0].eventId],
          type: "event",
          needEventTime: true,
        },
        operationCtx: {},
      };
      propertyList(params)
        .then((res) => {
          // 返回状态码如果不是成功说明异常 弹出提示
          if (res.data.success !== true) {
            t.$message.error(res.data.errorMessage);
            return;
          }
          t.byXXXReadtabsBodyParams.push(res.data.value);
          t.doByXXXReadtabsBodyParamsEventSecond(t, resolve);
        })
        .catch((error) => {
          console.log("error = ", error);
        });
    },
    doByXXXReadtabsBodyParamsEventSecond(t, resolve) {
      let params = {
        req: {
          events: [this.currentEventGroup[1].eventId],
          type: "event",
          needEventTime: true,
        },
        operationCtx: {},
      };
      propertyList(params)
        .then((res) => {
          // 返回状态码如果不是成功说明异常 弹出提示
          if (res.data.success !== true) {
            t.$message.error(res.data.errorMessage);
            return;
          }
          t.byXXXReadtabsBodyParams.push(res.data.value);
          t.doByXXXReadtabsBodyParamsUser(t, resolve);
        })
        .catch((error) => {
          console.log("error = ", error);
        });
    },
    doByXXXReadtabsBodyParamsUser(t, resolve) {
      let params = {
        req: {
          type: "user",
          needEventTime: true,
        },
        operationCtx: {},
      };
      propertyList(params)
        .then((res) => {
          // 返回状态码如果不是成功说明异常 弹出提示
          if (res.data.success !== true) {
            t.$message.error(res.data.errorMessage);
            return;
          }
          t.byXXXReadtabsBodyParams.push(res.data.value);
          t.byXXXReadtabsBodyParams.push({
            total: 1,
            list: [],
          });
          t.byXXXReadtabsBodyParams.push({
            total: 1,
            list: [],
          });
        })
        .catch((error) => {
          console.log("error = ", error);
        });
    },

    /* 选择属性 */
    choAttributeEnd(mes, attribute, index) {
      if (mes.key === "byXXXRead") {
        this.byXXXReadValues[mes.index] = attribute;
        if (index === 0 || index === 1) {
          this.byXXXReadValues[mes.index]["parentName"] =
            this.currentEventGroup[index].eventId;
        } else if (index === 2) {
          this.byXXXReadValues[mes.index]["parentName"] = "user";
        }
        this.byXXXReadValues[mes.index]["parentIndex"] = index;
        this.showbyXXXReadtabsBodyParams[mes.index] = { isShow: false };
        this.initSameTimeShow();
      }
      this.$forceUpdate();
    },

    /* 关闭同时显示 */
    closeSameTime() {
      this.isSameTime = false;
    },

    /* 添加筛选条件 */
    editCond(i) {
      /* 初始行为 i=0
       *  后续行为 i=1
       *   */
      this.$refs["customScreenRef" + i].editCond();
    },
    /* 视图类型切换 */
    stateChange() {
      if (this.state === "trends") {
        this.retainedAnlaysisToEChartAndTableTrend();
      } else if (this.state === "overview") {
        this.retainedAnlaysisToEChartAndTableOverview();
      }
    },
    /* 选择初始/后续/同时/事件结束 */
    choEventEnd(res) {
      let _this = this;
      let index = res.origin;
      if (res.origin === 2) {
        this.currentSameEventGroup = JSON.parse(JSON.stringify(res.mes));
      }
      this.currentEventGroup[index] = res.mes;

      new Promise((resolve) => {
        _this.loadRelation(
          index,
          this.currentEventGroup[index].eventId,
          resolve
        );
      });

      this.choEvent(res.origin);
    },
    /* 改变关联属性的数值 */
    loadRelation(index, name, resolve) {
      let t = this;
      switch (index) {
        case 0:
        case 1:
          let param = {
            req: {
              events: [name],
              type: "event",
              needEventTime: true,
            },
            operationCtx: {},
          };
          propertyList(param)
            .then((res) => {
              t.curRelation[index] = {};
              // 返回状态码如果不是成功说明异常 弹出提示
              if (res.data.success !== true) {
                t.$message.error(res.data.errorMessage);
                return;
              }
              t.curRelationList[index] = res.data.value.list;

              //重新刷新按xx排序
              t.doByXXXReadtabsBodyParams(resolve);
              t.$forceUpdate();
            })
            .catch((error) => {
              console.log("error = ", error);
            });
      }
    },

    /* 点击对应事件后 展示与关闭*/
    choEvent(index) {
      this.showEventGroup[index].show = !this.showEventGroup[index].show;
      this.$forceUpdate();
    },
    //获取事件分组和所有事件类型
    getThinglData() {
      let t = this;
      let params = {
        req: {
          appId: JSON.parse(window.sessionStorage.getItem("appItem")).appId,
        },
        operationCtx: {},
      };
      let group = new Promise((resolve, reject) => {
        thinglGroup(params).then((res) => {
          if (res.data.success !== true) {
            t.$message.error(res.data.errorMessage);
            return;
          }
          res.data.value[0].mateEventList.unshift({
            eventId: "_Anything",
            eventName: "任意事件",
            productCode: "dx",
          });
          t.initEventGroup = res.data.value;
          resolve();
        });
      });

      group.then((value) => {
        new Promise((resolve, reject) => {
          thinglList(params).then((res) => {
            if (res.data.success !== true) {
              t.$message.error(res.data.errorMessage);
              return;
            }
            t.initEventGroupDetail = res.data.value.list;

            let item = {
              appId: 1,
              cname: "任意事件",
              id: -1,
              eventId: "_Anything",
            };
            res.data.value.list.unshift(item);
            t.initEventGroupDetail = res.data.value.list;
            t.currentEventGroup[0] = item;
            t.currentEventGroup[1] = item;
            t.currentEventGroup[2] = item;
          });
        });
      });
    },
    //获取同时显示xxx的属性
    getEventsData() {
      let t = this;
      // let param = {
      //     "req":{
      //         events: [t.currentEventGroup[2].eventId],
      //         type: "event",
      //         needEventTime: true},
      //     "operationCtx":{}
      // };
      // propertyList(param).then(res => {
      //     if (res.data.success !== true) {
      //         t.$message.error(res.data.errorMessage);
      //         return;
      //     }
      //     let arr = res.data.value.list;
      //     arr.map(item => {
      //         item.value = item.name;
      //         item.label = item.cname;
      //         if (item.dataType === 'number') {
      //             item.children = [
      //                 {value: 'AVG', label: '均值'},
      //                 {value: 'SUM', label: '总和'},
      //                 {value: 'MAX', label: '最大值'},
      //                 {value: 'MIN', label: '最小值'},
      //                 {value: 'uniqCount', label: '去重数'}
      //             ]
      //         } else {
      //             item.children = [
      //                 {value: 'uniqCount', label: '去重数'}
      //             ]
      //         }
      //     })
      //     t.sameOptions = arr;
      //     t.sameOptions.unshift({value: 'average', label: '人均次数'})
      //     t.sameOptions.unshift({value: 'unique', label: '用户数'})
      //     t.sameOptions.unshift({value: 'general', label: '总次数'})
      // }).catch(error => {
      //     console.log("error=", error)
      // })
      t.sameOptions = [];
      t.sameOptions.unshift({ value: "unique", label: "用户数" });
      t.sameOptions.unshift({ value: "general", label: "总次数" });
    },
  },
  created() {
    let _this = this;
    let x = this.getThinglData();
    this.initYestedayShowTime();
    const init = new Promise((resolve) => {
      _this.loadRelation(0, "_Anything", resolve);
    }).then((resolve) => {
      this.loadRelation(1, "_Anything", resolve);
    });
  },
  beforeMount() {},
  mounted() {
    this.getEventsData();
    this.$nextTick(() => {
      // 监听 window 窗口变化，自适应图表
      window.addEventListener("resize", this.autoChart);
    });
  },
  computed: {},
};
</script>

<style scoped lang="scss">
.lineHeader {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  margin: 10px;
  display: flex;

  div {
    font-size: small;
    margin-left: 10px !important;
  }
}

* {
  touch-action: pan-y;
}

.timeBox {
  height: 32px;
  margin-right: 15px;
  margin-left: 15px;
  z-index: 100;
}

.diglog_box {
  .dialog {
    position: relative;

    .save_config {
      width: 100%;

      .line {
        width: 99%;
        margin: 0rem auto 0.1rem;
        display: flex;
        justify-content: space-between;

        .left {
          width: 20%;
          height: 100%;
          text-indent: 0.12rem;
          height: 0.8rem;
          letter-spacing: 2px;
          // font-size: 14px;
          font-size: 0.22rem;
          display: flex;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          align-items: center;
        }

        .right {
          height: 100%;
          width: 80%;
          min-height: 1rem;
          display: flex;
          align-items: center;

          .type_ech {
            cursor: pointer;
            min-width: 1rem;
            // height: 0.8rem;
            min-height: 0.8rem;
            padding: 0 0 2px 0;
            display: inline-block;
            margin: 0 0.2rem 0 0;
            // font-size: 10px;
            font-size: 0.1rem;
            text-align: center;
            border-radius: 4px;
            border: 1px solid rgba($color: #8492a6, $alpha: 0.3);
            color: rgba($color: #8492a6, $alpha: 0.9);
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;

            .txt {
              width: 100%;

              i {
                font-size: 0.26rem;
              }

              .size {
                display: inline-block;
                width: 90%;

                .box {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-evenly;
                  padding: 0.05rem 0;

                  .s,
                  .m,
                  .b {
                    border-radius: 2px;
                    border: 1px solid rgba($color: #8492a6, $alpha: 0.3);
                  }

                  .s {
                    width: 44%;
                    height: 0.2rem;
                  }

                  .m {
                    width: 44%;
                    height: 0.48rem;
                  }

                  .b {
                    width: 90%;
                    height: 0.5rem;
                  }
                }

                .boxs {
                  height: 0.3rem;
                }

                .boxm {
                  height: 0.5rem;
                }

                .boxb {
                  height: 0.5rem;
                }

                .activeSize {
                  background: rgba($color: #8492a6, $alpha: 0.2);
                  border: 1px solid rgba($color: #8492a6, $alpha: 0);
                }
              }
            }

            .iconCheck {
              position: absolute;
              top: 0;
              right: 0;
              width: 0;
              height: 0;
              border-bottom: 26px solid transparent;
              border-right: 26px solid rgba($color: #01b27a, $alpha: 0.8);
            }

            .el-icon-check {
              position: absolute;
              top: 2px;
              right: 2px;
              color: white;
            }
          }

          .type_ech:hover {
            border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
            color: rgba($color: #01b27a, $alpha: 0.8);
          }

          .active {
            border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
            color: rgba($color: #01b27a, $alpha: 0.8);
          }

          .type_ech_size {
            margin-top: 0.2rem;
            width: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            padding-top: 0.02rem;
          }
        }

        .big {
          height: 2rem;
        }
      }

      .lineSize {
        margin: 0.2rem auto;
      }

      .el_input {
        width: 100%;
      }
    }
  }
}

.toDoButton {
  width: 192px;
  position: absolute;
  right: 0px;
}

.app {
  padding: 6px 10px;
  height: 34px;
  line-height: 20px;
  min-width: 60px;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
  border-radius: 3px;
}

.step-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  /*&:hover {*/
  /*    .click1 {*/
  /*        box-shadow: 0px 0px 10px;*/
  /*    }*/
  /*}*/
}

.click1 {
  height: 23px;
  line-height: 23px;
  border: 1px solid #dcdfe6;
  width: 200px;
  margin-left: 10px;
  text-indent: 6px;
  color: #bbb;
  position: relative;
  cursor: pointer;

  span {
    width: 200px;
    margin-right: 10px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    cursor: pointer;
    color: black;

    span:hover {
      overflow: visible;
    }
  }

  div {
    display: flex;
    align-items: center;
  }
}

::v-deep .show_hidden {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: -0.2rem;
  z-index: 10;
}

.crumbs_arr_box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tool_main {
    padding: 0 0.5rem 0 10px;
    font-size: 12px;
    font-weight: 500;
    color: #606266;
    // line-height: 44px;
    letter-spacing: 2px !important;

    .select {
      margin: 0 6px;
    }

    .fgf {
      display: inline-block;
      width: 1px;
      height: 16px;
      background: #c0c4cc;
      margin: 0 8px;
    }

    .tool_son {
      font-size: 16px;
      margin: 0 8px;
      font-size: 0.26rem;
    }

    .save {
      display: inline-block;
      font-size: 0.22rem;
      height: 0.3rem;
      font-weight: 500;
      line-height: 0.3rem;
      margin-right: 0.1rem;

      i {
        font-size: 0.26rem;
      }
    }

    .tool_son:hover {
      color: #01b27a;
      font-weight: 600;
    }
  }
}

.block_tool {
  width: 98%;
  margin: 2px auto;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;

  .left {
    display: inline-block;
    width: 30%;
  }

  .right {
    display: inline-block;
    width: 70%;
  }

  .end {
    font-size: 14px;
    font-weight: 600;

    .btn_c {
      margin-right: 20px;
      font-weight: 400;
      font-size: 10px;
    }

    .btn_s {
      font-weight: 400;
      font-size: 10px;
      color: #f2f6fc;
      background: rgba($color: #01b27a, $alpha: 0.8);
      padding: 4px 10px;
      border-radius: 4px;
    }

    .btn_c:hover {
      color: #01b27a;
      font-weight: 500;
      font-size: 12px;
    }
  }
}

.ltvAnalysis::-webkit-scrollbar {
  display: none;
}

.ltvAnalysis {
  width: 98% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  height: 98.6% !important;
  overflow: scroll;
}

.filterBox,
.contentBox {
  padding: 10px 15px 0px 15px;
  /*padding:10px 15px;*/
  background-color: #ffffff;
  border-radius: 5px;
  margin: 15px 0;
  box-shadow: 0 2px 11px rgba(190, 202, 218, 0.17);
}

/* 筛选项区 */
.filterBox {
  .viewFunnelBox {
    border-bottom: 1px solid #e7e7e7;
    position: relative;

    .title-size {
      display: inline-block;
      width: 80px;
      padding: 0 10px;
      text-align: right;
    }

    .el-select {
      margin-right: 10px;
    }
  }

  .viewFunnelBoxLast {
    position: relative;

    .title-size {
      display: inline-block;
      width: 80px;
      padding: 0 10px;
      text-align: right;
    }

    .el-select {
      margin-right: 10px;
    }
  }

  .funnelSettingBox {
    border-left: 2px solid #6fd3b3;
    padding: 5px 0 5px 97px;
    position: relative;

    &:hover {
      background-color: #fafafa;
    }

    ::v-deep input[type="number"] {
      padding-right: 0;
    }

    .el-select {
      margin-right: 10px;
    }

    .size {
      padding-right: 5px;
    }

    .betweenBox,
    .datetimeBox {
      display: inline-block;
    }
  }

  i.el-icon-delete {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;

    &:hover {
      color: rgb(247, 86, 94);
    }
  }

  .andOrNotBox,
  .lineBox {
    position: absolute;
    top: 50%;
  }

  /* 且或非 */
  .andOrNotBox {
    width: 26px;
    height: 26px;
    font-size: 12px;
    text-align: center;
    line-height: 26px;
    border: 1px solid #cccccc;
    background-color: #fafafa;
    border-radius: 3px;
    cursor: pointer;
    z-index: 10;
    transform: translate(46px, -50%);
  }

  .lineBox {
    width: 26px;
    border: 1px solid #cccccc;
    border-right: none;
    transform: translate(60px, -50%);
    z-index: 5;
  }

  /* 设置筛选条件 */
  .settingCondition {
    padding: 10px 10px 0 100px;
  }
}

.childFilterBox {
  padding: 10px 0 15px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e7e7e7;

  .winPeriodBox {
    margin-left: 20px;
    float: left;

    .title {
      float: right;
      font-size: 12px;

      p {
        margin: -2px 0 -2px 10px;
      }

      p:nth-child(1) {
        color: #cccccc;
      }
    }
  }

  .el-radio-group {
    float: left;
  }

  .el-range-editor.el-input__inner {
    padding: 0 10px;
  }

  ::v-deep .el-range-editor--mini .el-range__close-icon {
    display: none;
  }

  ::v-deep .el-range-editor--mini .el-range-separator {
    line-height: 25px;
  }

  /* 对比选项 */
  .contrastFunnelBox {
    font-size: 12px;
    display: inline-block;
    padding: 0 10px;

    .vs {
      padding: 0 5px;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
#isSameContext {
  margin-bottom: 10px;
}
/* 营收事件步骤 */
.steps {
  padding: 6px 0px 6px;
  width: 100%;
  position: relative;
  height: auto;

  .step-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    /*&:hover {*/
    /*    background-color: #f9fcfe;*/

    /*    .click1 {*/
    /*        box-shadow: 0px 0px 10px;*/
    /*    }*/
    /*}*/
  }

  .click1 {
    height: 23px;
    line-height: 23px;
    border: 1px solid #dcdfe6;
    width: 200px;
    margin-left: 10px;
    text-indent: 6px;
    color: #bbb;
    position: relative;
    cursor: pointer;

    span {
      width: 200px;
      margin-right: 10px;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
      cursor: pointer;
      color: black;

      span:hover {
        overflow: visible;
      }
    }

    div {
      display: flex;
      align-items: center;
    }
  }

  i {
    position: absolute;
    right: 10px;
    font-size: 14px;
    height: 5px;
  }
}
</style>
